// /**
//  * Created by python on 19-3-1.
//  */


let app = new Vue({
    el: "#hde",
    data: {
        // 页面中需要使用到的数据，键值对
        user_id: sessionStorage.user_id || localStorage.user_id,
        token: sessionStorage.token || localStorage.token,
        host: HOST,
        headline_details: '',
        headline: '',
        comment_content: '',


        pk: null,
        key: null,
        id: null,
        headline_id: null,
        hd: null,
        other_con: null,
        send_comment: null,
        page: 1,
        page_size: 5,
        spit: null,
        error_comment: false,
        comment_count: null,
    },
    mounted: function () {

        // this.pk = get_query_string(key, 5);
        this.get_sku_id();
        this.get_headline_detail();
        this.get_headline_detail_comments();

        this.get_spits()
    },
    methods: {
        // 获取地址栏id
        get_sku_id: function () {
            // "http://127.0.0.1:8080/headline-detail.html?id=5"
            // alert(document.location);
            // 匹配地址栏中的5
            this.pk = document.location.search.split('=')[1];
            // alert(pk)
            // this.pk = this.id
        },
        // 需要用到的函数，键值对 ，键是名称，值是匿名函数
        get_headline_detail: function () {
            // 取得头条详情
            this.get_sku_id();
            // console.log(this.pk)
            axios.get(this.host + "/headlines/" + this.pk + '/details/', {
                // headers: {
                //     'Authorization': 'JWT ' + this.token
                //     },
                responseType: 'json',
                withCredentials: true
            })
                .then(response => {
                    this.headline_details = response.data;
                    console.log(response.data);
                    if (this.user_id) {
                        axios.post(this.host+'/browse_histories/', {
                            history_title: this.headline_details.title,
                            history_address: window.location.href
                        }, {
                            headers: {
                                'Authorization': 'JWT ' + this.token
                            }
                        })
                    }

                })
            // .catch(error =>{
            //
            // })
        },
        get_headline_detail_comments: function () {
            // 获取头条详情评论
            // this.hd = headline_id
            // this.headline_id = document.location.search.split('=')[1];
            axios.get(this.host + "/details/" + this.pk + '/comments/', {
                // headers: {
                //     'Authorization': 'JWT ' + this.token
                //     },
                responseType: 'json',
                withCredentials: true
            })
                .then(response => {
                    console.log(response.data);
                    this.hd = response.data;
                    this.comment_count = response.data.length;

                });
            // .catch(error =>{
            //
            // })
        },
        get_headline_other_comments: function (headline_comment_id) {
            // 获取头条详情评论
            // this.hd = headline_id
            // this.other_comment = document.location.search.split('=')[1];
            axios.get(this.host + "/others/" + headline_comment_id + '/comments/', {
                // headers: {
                //     'Authorization': 'JWT ' + this.token
                //     },
                responseType: 'json',
                withCredentials: true
            })
                .then(response => {
                    //this.other_con = response.data;
                    console.log(response.data);
                    this.other_con = response.data;
                });
            // .catch(error =>{
            //
            // })
        },
        check_comment: function () {
            let len = this.comment_content.length;
            if (len < 10) {
                layer.msg('评论长度应大于10');
                this.error_comment = true
            } else {
                this.error_comment = false
            }
        },
        sub_comment: function (hd_id) {
            this.check_comment();
            if (this.error_comment == true) {
                return
            }
            // 发表主评论
            axios.post(this.host + "/details/comments/", {
                user: this.user_id,
                headline: hd_id,
                comment_content: this.comment_content,

            }, {
                headers: {
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
                withCredentials: true
            })
                .then(response => {
                    this.get_headline_detail_comments();
                    console.log(response.data);
                    layer.msg('评论成功')
                })
                .catch(error => {
                    layer.msg('评论失败，请登录')
                })
        },
        // 获取热门吐槽
        get_spits: function () {
            axios.get(this.host + '/spit/', {
                params: {
                    page: this.page,
                    page_size: this.page_size,
                },
                headers: {
                    'Authorization': 'JWT ' + this.token
                },
                responseType: 'json',
                withCredentials: true
            })
                .then(response => {
                    console.log(response.data.results);
                    this.spit = response.data.results;
                })
                .catch(error => {
                    console.log(error.response.data)
                })
        },
        aaaaa: function () {
            console.log(this.hd)
        }
    }

})


